<template>
   <div>
    <span> {{ username }}</span> <br />
    <span>{{ count }}</span>
    <p>{{ car.price }}</p>
    <div class="color" :style="{ background: car.color }"></div>
    <button @click="addCount">测试</button>
    <button @click="changePrice(10)">修改价格</button>
    <button @click="getRandomColor">随机颜色</button>
    <button @click="changeCar">改变车</button>

    <hr />
    <span>{{ name }}</span>
    <span>{{ age }}</span>
    <button @click="changeInfo">测试111</button>

    <!-- 计算属性 -->
    <hr />
    姓：<input type="text" v-model="firsName" /><br />
    名：<input type="text" v-model="endName" />
    <hr />
    姓名：<span>{{ fullName }}</span>
    <button @click="changeFullName">改姓名</button>
    <!--监视属性 ---情况一 -->
    <span>{{ watchvalue }}</span
    ><br />
    <button @click="watchchange">改变值</button><br />
    <!--监视属性 ---情况二 -->
    <p>{{ person2.username }}</p>
    <p>{{ person2.age }}</p>
    <button @click="changeVal">改变值</button>
    <hr />
    <h2>{{ person3.age }}</h2>
    <h2>{{ person3.car.name }}</h2>
    <button @click="changePerson3Age">changePerson3Age</button>
    <button @click="changePerson3car">changePerson3car</button>

    <hr>
    <span>水温：{{ temp }}</span>
    <button @click="changeTemp">改变水温</button>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, toRefs, computed, watch,watchEffect } from "vue";
let username = "admin";
let count = ref(0);
let car = ref({
  color: "red",
  price: 100,
});
let a = ref(0);

let person = reactive({
  name: "张三",
  age: 18,
});

let { name, age } = toRefs(person);

function changeInfo() {
  name.value = "李四";
  a.value++;
}
function addCount() {
  count.value++;
  a.value++;
}

let changePrice = (price: number) => {
  // car.price += price;
};
function changeCar() {
  // car={
  //   color:'blue',
  //   price:100
  // }
  // Object.assign(car,{color:'skyblue',price:111111})
  car.value = {
    color: getRandomColor(),
    price: 123123,
  };
}

function getRandomColor() {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  // 检查是否已经生成过该颜色，如果已经生成过则重新生成

  return color;
}

// 计算属性
let firsName = ref("张");
let endName = ref("三");

// 只读
// let fullName=computed(()=>{
//   return firsName.value+endName.value
// })

let fullName = computed({
  get() {
    return firsName.value + endName.value;
  },
  set(value) {
    let [first, last] = value.split("");
    firsName.value = first;
    endName.value = last;
  },
});

function changeFullName() {
  fullName.value = "李四";
}

let watchvalue = ref(0);

const stoWacth = watch(watchvalue, (value, oldValue) => {
  console.log(value, oldValue);
  if (value > 10) {
    stoWacth();
  }
});

function watchchange() {
  watchvalue.value++;
}

let person2 = ref({
  username: "admin",
  age: 18,
});
function changeVal() {
  person2.value.username = "李四";
  person2.value.age = 19;
}
watch(
  person2,
  (value, oldValue) => {
    console.log(value, oldValue);
  },
  { deep: true }
);

let person3 = reactive({
  username: "admin",
  age: 18,
  car: {
    name: "宝马",
  },
});

function changePerson3Age() {
  person3.age = 20;
}
function changePerson3car() {
  person3.car = { name: "保时捷" };
}

watch(
  () => person3.age,
  (value, oldValue) => {
    console.log(value, oldValue);
  }
);

watch(
  () => person3.car,
  (value, oldValue) => {
    console.log(value, oldValue);
  },
  { deep: true }
);

let temp=ref(0)

function changeTemp() {
  temp.value++;
}
//自动监视
watchEffect(()=>{
  if(temp.value>10){
     console.log("temp大于10");
  }
})
defineExpose({person,person2})
</script>
<style scoped>
.color {
  width: 50px;
  height: 50px;
}
</style>
